<script setup>
import {ref} from "vue";
import {Lock} from "@element-plus/icons-vue";

const passModel = ref({
  old_pwd:'',
  new_pwd:'',
  re_pwd:''
})
//更新密码函数
import {userPwdUpdateService} from "@/api/user.js";
import {ElMessage} from "element-plus";
import {useTokenStore} from "@/stores/token.js";
import {useRouter} from "vue-router";
const router = useRouter();
const tokenStore = useTokenStore();
const updatePwd = async ()=>{
  let result = await userPwdUpdateService(passModel.value);
  ElMessage.success(result.msg? result.msg:"修改成功，请重新登录");
  tokenStore.removeToken();
  await router.push('/login');
}
const checkRePassword = (rule,value,callback)=>{
  if(value===''){
    callback(new Error('请再次确认密码'))
  }else if(value !== passModel.value.new_pwd){
    callback(new Error('请确保两次输入的密码一样'))
  }else{
    callback()
  }
}
const rules={
  old_pwd:[
    {required:true,message:"请输入密码",trigger: 'blur'},
    {min:5,max:16,message: "长度为5到16位非空字符",trigger:'blur'}
  ],
  new_pwd:[
    {required:true,message:"请输入密码",trigger: 'blur'},
    {min:5,max:16,message: "长度为5到16位非空字符",trigger:'blur'}
  ],
  re_pwd:[
    {validator:checkRePassword,trigger:'blur'}
  ]
}
</script>
<template>
  <el-card>
    <template #header>
      <div class="header">
        <span>基本资料</span>
      </div>
    </template>
    <el-row>
      <el-col :span="12">
        <el-form label-width="100px" size="large" :model="passModel" :rules="rules">
          <el-form-item prop="old_pwd" label="原密码">
            <el-input v-model="passModel.old_pwd" type="password" :prefix-icon="Lock" show-password></el-input>
          </el-form-item>
          <el-form-item prop="new_pwd" label="新密码">
            <el-input v-model="passModel.new_pwd" type="password" :prefix-icon="Lock" show-password></el-input>
          </el-form-item>
          <el-form-item prop="re_pwd" label="确认新密码">
            <el-input v-model="passModel.re_pwd" type="password" :prefix-icon="Lock" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updatePwd">提交修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-card>
</template>
